<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品详情</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../static/layui/css/layui.css"/>
<link rel="stylesheet" href="../static/css/goodsDesc.css"/>
<body>

<div class="container layui-layer-content">
	<h3>商品详情</h3>
	<hr class="layui-border-orange">
	<div class="goods-box">
		<div class="choose">
			<div class="content">
				<img id = "small">
			</div>
			<ul id = "listshow"></ul>
		</div>

		<div class="good-desc">
			<p>书名:
				<span class="book-name"></span>
			</p>
			<p>作者:
				<span class="book-author"></span>
			</p>
			<p>价钱:
				<span>￥</span>
				<span class="book-amount"></span>
			</p>
			<p>出版社:
				<span class="book-press"></span>
			</p>
			<p>书籍详情:
				<span class="book-introduce"></span>
			</p>
			<div class="collection-div">
				<img id="collection_img" onclick="addWant()" src="../static/img/collection.png" />
			</div>
			<div class="function-bar">
				<button class="layui-btn layui-btn-normal layui-btn-radius purchase">购买</button>
				<button class='layui-btn layui-btn-normal layui-btn-radius postForum'>评论</button>
			</div>
		</div>
	</div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend>用户评论</legend>
	</fieldset>
	<div id = "myForum"></div>
</div>


<div class="modal fade" id="forumModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">评论</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<input type="hidden" id="rid" value="">
					<input type="hidden" id="rForum" value="">
					<textarea id="content" class='published-input' placeholder="评论正文"></textarea>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">关闭</button>
				<button type="button"  class="btn btn-primary" onclick="addForum()">发布</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">购买图书</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<textarea id="remarks" class='published-input' placeholder="请输入备注"></textarea>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">关闭</button>
				<button type="button"  class="btn btn-primary" onclick="purchase()">购买</button>
			</div>
		</div>
	</div>
</div>
</body>
<script src="../static/js/jquery-3.0.0.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
	var url = location.search;
	var id = null;
	if(url!=null && url!="") {
		let index = url.lastIndexOf("=");
		id = url.substring(index + 1, url.length);
	}
	$(document).ready(function(){
		if(id!=null && id!=""){
			$.ajax({
				url:"/goods/getGoods",
				type:"post",
				data:{
					"id" : id
				},
				success:function(result){
					if(result.code==200){
						let goods = result.data;
						$(".book-name").html(goods.name);
						$(".book-author").html(goods.author);
						$(".book-amount").html(goods.amount);
						$(".book-press").html(goods.press);
						$(".book-introduce").html(goods.introduce);
						let imgs = goods.image.split("/;");
						for(let i=0;i<imgs.length;i++){
							$("#listshow").append(
							"<li>"+
								"<img src='"+imgs[i]+"'"+
								"data-img = '"+imgs[i]+"'>"+
							"</li>"
							);
						}
						$("#small").attr("src",imgs[0]);
					}else{
						layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
					}
				}
			});
			$.ajax({
				url:"/forum/getEasyForum",
				type:"get",
				data:{
					"gid" : id
				},
				success:function(result){
					if(result.code==200) {
						$.each(result.data, function (index, forum) {
							$("#myForum").append(
									"<blockquote class='layui-elem-quote'>"+
									"<p hidden='hidden'>" + forum.uid + "</p>" +
									"<span>"+forum.name+"</span>："+
									"<span>"+forum.content+"</span>"+
									"<button class='layui-btn layui-btn-normal layui-btn-radius postForum'>回复</button>" +
									"</blockquote>"
							)
						});
					}else{
						layer.msg(result.msg,{icon: 2,time:2000});
					}
				}
			})
		}
	});
	function addForum() {
		$.ajax({
			url:"/forum/addForum",
			type:"post",
			data:{
				"gid":id,
				"rid":$("#rid").val(),
				"rForum":$("#rForum").val(),
				"content":$("#content").val(),
			},
			headers: {
				Authorization: sessionStorage.Authorization
			},
			success:function(result){
				if (result.code == 200) {
					layer.msg("评论成功！",{icon: 1,time:2000,},function(){window.location.reload()});
				}else if(result.code==401){
					sessionStorage.removeItem("Authorization");
					layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}

	function purchase() {
		$.ajax({
			url:"/goods/purchase",
			type:"post",
			data:{
				"id":id,
				"remarks":$("#remarks").val(),
			},
			headers: {
				Authorization: sessionStorage.Authorization
			},
			success:function(result){
				if (result.code == 200) {
					layer.msg("购买成功！",{icon: 1,time:2000,},function(){window.location.href="../order/orderList.html"});
				}else if(result.code==401){
					sessionStorage.removeItem("Authorization");
					layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}
	function addWant() {
		$.ajax({
			url:"/goods/addWant",
			type:"post",
			data:{
				"id":id,
			},
			headers: {
				Authorization: sessionStorage.Authorization
			},
			success:function(result){
				if (result.code == 200) {
					layer.msg("好耶，商品热度+1",{icon: 1,time:2000});
				}else if(result.code==401){
					sessionStorage.removeItem("Authorization");
					layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
				}else{
					layer.msg(result.msg,{icon: 2,time:2000});
				}
			}
		})
	}

	$("#listshow").on('click mouseover',"img", function () {	//图片
		$("#small").attr("src",this.src);
	});
	$(".postForum").click(function (){
		$("#rid").val("");
		$("#rForum").val("");
		$("#forumModal").modal("show");
	});
	$("#myForum").on('click',".postForum", function () {	//图片
		$("#rid").val(this.parentNode.getElementsByTagName("p")[0].innerHTML);
		$("#rForum").val(this.parentNode.getElementsByTagName("span")[1].innerHTML);
		$("#forumModal").modal("show");
	});
	$(".purchase").click(function (){
		$("#purchaseModal").modal("show");
	});

</script>
</html>
